<template>
  <div class="box">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div v-if="isShow" class="radio"></div>
    </transition>
    <button @click="isShow = true" class="btn">加入购物车</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    // transition组件的事件钩子接收的第一个是当前执行动画的元素
    // 我们可以在@before-enter事件中进行对元素初始样式的操作
    beforeEnter(el) {
      console.log('动画进入之前');
      el.style.transform = 'translate(0,0)';
    },

    // 我们可以在@enter事件中对元素进行动画控制
    // enter的事件函数可以接收第二个参数done方法，就是让afterEnter立即触发(正常afterEnter是动画结束之后触发)
    enter(el, done) {
      console.log(1);
      el.offsetWidth; //是个谜
      el.style.transform = 'translate(350px,425px)';
      el.style.transition = 'all .2s linear';
      done();
    },

    // 我们可以使用@afterEnter事件 对元素进入以后做一些后续操作
    // 动画走完才叫真正的进入之后

    afterEnter() {
      this.isShow = false;
    },
  },
};
</script>
<style scoped>
.box {
  width: 400px;
  height: 500px;
  border: 1px solid #000;
  position: relative;
}

.btn {
  position: absolute;
  width: 100px;
  height: 30px;
  right: 10px;
  bottom: 10px;
}
.radio {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%a;
}
</style>
